<template>
  <div class="q-loading">
    <div class="bar bar1" :style="divStyle"></div>
    <div class="bar bar2" :style="divStyle"></div>
    <div class="bar bar3" :style="divStyle"></div>
    <div class="bar bar4" :style="divStyle"></div>
    <div class="bar bar5" :style="divStyle"></div>
    <div class="bar bar6" :style="divStyle"></div>
    <div class="bar bar7" :style="divStyle"></div>
    <div class="bar bar8" :style="divStyle"></div>
    <div class="bar bar9" :style="divStyle"></div>
    <div class="bar bar0" :style="divStyle"></div>
  </div>
</template>

<script>
  export default {
    name: 'QLoading',
    props:{
      width: {
        type: String,
        required: false,
        default: '7px'
      },
      height: {
        type: String,
        required: false,
        default: '60px'
      }
    },
    computed: {
      divStyle () {
        return { width: this.width, height: this.height }
      }
    }
  }
</script>

<style lang="less" scoped>
  .bar{
    /*width: 10px;*/
    /*height: 100px;*/
    background: rgba(0, 0, 0, 0);
    display: inline-block;
    margin-right: 5px;
    transform-origin: bottom center;
    animation: loading 1.5s ease-in-out infinite;
  }
  .bar1{
    animation-delay: 0.1s;
  }
  .bar2{
    animation-delay: 0.2s;
  }
  .bar3{
    animation-delay: 0.3s;
  }
  .bar4{
    animation-delay: 0.4s;
  }
  .bar5{
    animation-delay: 0.5s;
  }
  .bar6{
    animation-delay: 0.6s;
  }
  .bar7{
    animation-delay: 0.7s;
  }
  .bar8{
    animation-delay: 0.8s;
  }
  .bar9{
    animation-delay: 0.9s;
  }
  .bar0{
    animation-delay: 1s;
  }
  @keyframes loading {
    0%{
      transform: scaleY(0.1);
      /*background: #ff0000;*/
      /*background: #99181b;*/
      background: #748f75;
    }
    50%{
      transform: scaleY(1);
      /*background: #cbacac;*/
      /*background: #0d1d46;*/
      background: #277d93;
    }
    100%{
      transform: scaleY(0.1);
      background: transparent;
    }
  }
</style>